<template>
    <div>
        <h1>用户</h1>
        <el-table :data="tableData" style="width: 100% ;margin: 0 auto;" max-height="250">
            <el-table-column fixed prop="username" label="账号" width="350" align="center">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="350" align="center">
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageNum"
                :page-sizes="[1, 2, 3, 4]" :page-size="2" layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { selectSystemUserByRole } from '@/api/systemManager'
export default {
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 2,

            },
            tableData: [],
            pageTotal: 0,
        };
    },
    props: ['fatherId'],
    mounted() {
        this.query.id = this.fatherId
        this.getData()
    },
    methods: {
        //获取用户表格数据
        async getData() {
            let result = await selectSystemUserByRole(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total

            }
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val
            this.getData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.getData();
        },
    },
    watch:{
        fatherId(val){
             this.query.id = val
             this.getData()
        }
    }


};
</script>

<style  lang="less" scoped></style>
